<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书刊管理</title>
  <link rel="stylesheet" href="../css/book-management.css">
  <link rel="stylesheet" href="../font/iconfont.css">

  <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
  <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <script src="../javaScript/data_management.js"></script>
  <script src="../javaScript/utl.js"></script>
  <script src="../javaScript/quanxianpanduan.js"></script>
  <link rel="stylesheet" href="../css/caidanlan.css">
</head>

<body>
  <div class="container-fulid">
    <div class="row shouhang">
      <span class="iconfont icon-ziliaoku"></span>
      <p>图书馆后台管理系统</p>
      <div id='yonghu'>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 caidan">
        <a href="../html/jueseguanli.html">
          <p> 角色管理</p>
        </a>
        <a href="../html/guanliyuanguanli.html">
          <p>管理员管理</p>
        </a>
        <a href="./quanxianguanli.html">
          <p>权限管理</p>
        </a>
        <a href="../html/ReaderUser.html">
          <p>读者用户</p>
        </a>
        <a href="../html/duzhejuese.html">
          <p>读者角色</p>
        </a>
        <a href="../html/yuedu.html">
          <p>借阅查询</p>
        </a>
        <a href="../html/jieyueguanli.html">
          <p>借阅管理</p>
        </a>
        <a href="../html/book-management.html">
          <p>书刊管理</p>
        </a>
        <a href="../html/guancangdizhi.html">
          <p>馆藏地址管理</p>
        </a>
        <a href="../html/guancangfenlei.html">
          <p>馆藏分类管理</p>
        </a>
        <a href="../html/cengjiaLabel.html">
          <p>层架标签配置</p>
        </a>
        <a href="../html/fenguanshezhi.html">
          <p>分馆配置</p>
        </a>
        <a href="../html/book_inventory.html">
          <p>图书盘点</p>
        </a>
        <a href="../html/dindanguanli.html">
          <p>订单管理</p>
        </a>
        <a href="../html/tushuguanshezi.html">
          <p>图书馆设置</p>
        </a>
      </div>
      <div class="col-md-10 all">

        <span class="title">首页 </span>
        <span class="title"> > </span>
        <span class="title">书刊管理</span>
        <!-- 输入框 -->
        <ul id="shuru" class="clear">
          <li><button class="yellow" id="add">+新增</button></li>
          <li><input type="text" placeholder="请输入书名" class="input" id="title"></li>
          <li><input type="text" placeholder="请输入作者" class="input" id="zuoze"></li>
          <li> <input type="text" placeholder="请输入isbn" class="input" id="isbn"></li>
          <li><input type="text" placeholder="请输入出版社" class="input" id="chubanshe"></li>
          <li> <input type="text" placeholder="出版价格" class="input" id="money"></li>
          <li> <input type="text" placeholder="出版地" class="input" id="place"> </li>
          <li> <input type="text" placeholder="装订方式" class="input" id="path" disabled></li>

          <li><button class="yellow" id="right">获得导入模板</button></li>
          <li><button class="yellow">导入</button></li>
          <li><button class="yellow">导出</button></li>
          <li><button class="yellow" id="select">查询</button></li>

        </ul>
        <!-- 数据table -->
        <ul id="shuju" class="clear">
          <li class="gray">ISBN编码</li>
          <li class="gray">书名</li>
          <li class="gray">索引号</li>
          <li class="gray">出版地</li>
          <li class="gray">出版时间</li>
          <li class="gray">馆藏类型</li>
          <li class="gray">馆藏地址</li>
          <li class="gray">分类号</li>
          <li class="gray">作者</li>
          <li class="gray">副本数</li>
          <li class="gray">操作</li>
        </ul>
        <table border="">
          <tbody id="tbody">

          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- 修改的模态框 -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span>
          </button>
          <div id="exampleModalLabel"></div>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">书名:</label>
              <input type="text" class="form-control" id="book_name">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">索引号:</label>
              <input type="text" class="form-control" id="index_number" disabled>
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">出版地:</label>
              <input type="text" class="form-control" id="site">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">出版时间:</label>
              <input type="text" class="form-control" id="publication_time">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">馆藏类型:</label>
              <input type="text" class="form-control" id="book_class">
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">馆藏地址:</label>
              <input type="text" class="form-control" id="site_library">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">分类号:</label>
              <input class="form-control" id="class_num"></input>
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">作者:</label>
              <input class="form-control" id="author"></input>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" onclick="reset()">取消<tton>
              <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submit()">确定<tton>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除的模态框 -->

  <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">

        <div class="modal-body">
          <p>是否确认删除？？？</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="submit_dele()">确定</button>
        </div>
      </div>
    </div>
  </div>

</body>
<script>
  isLogin()
  let guanliname = glqx('书刊管理')

  $('#add').click(function () {
    if (czqx(guanliname, '新增')) {
      return
    }
    location.href = "./addnewbook.html";
  })

  $('#right').click(function(){
    if (czqx(guanliname, '新增')) {
      return
    }
    location.href = "./addnewbook.html";
  })
  
  function showtable(data) {
    $('#tbody').html("")
    data.forEach((item,index) => {
      $('#tbody').append(`
             <tr>
                <td>${item.ISBN}</td>
                <td>${item.book_name}</td>
                <td>${item.index_number}</td>
                <td>${item.chubanSite}</td>
                <td>${item.publication_time}</td>
                <td>${item.book_class}</td>
                <td>${item.site_library}</td>
                <td>${item.class_num}</td>
                <td>${item.author}</td>
                <td></td>
                <td> 
                   <div  class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button"type="button" class="btn btn-default"  onclick="dele(${item.id})" >删除</button>
  </div>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default" onclick="change(${index})">修改</button>
  </div>
</div></td>
            </tr>
    `)
    })
  }


  //查询
  $('#select').click(function () {
    if (czqx(guanliname, '查询')) {
      return
    }
    let title = $('#title').val()
    let zuoze = $('#zuoze').val()
    let isbn = $('#isbn').val()
    let chubanshe = $('#chubanshe').val()
    let money = $('#money').val()
    let place = $('#place').val()
    let path = $('#path').val()

    if (title != '') {
      let titledata = Newbook.filter(item => item.book_name == $('#title').val())

      showtable(titledata)
    }
    if (zuoze != '') {
      let authordata = Newbook.filter(item => item.author == $('#zuoze').val())
      showtable(authordata)
    }
    if (isbn != '') {
      let ISBNdata = Newbook.filter(item => item.ISBN == $('#isbn').val())
      showtable(ISBNdata)
    }
    if (chubanshe != '') {
      let chubansedata = Newbook.filter(item => item.ISBN == $('#chubanshe').val())
      showtable(chubansedata)
    }
    if (place != '') {
      let placedata = Newbook.filter(item => item.chubanSite == $('#place').val())
      showtable(placedata)
    }

  })
  //将新增的数据传过来
  let str = JSON.parse(sessionStorage.getItem("shuju"))
  Newbook.push(str)
  //再次调用showtable  让新数据显示出来
  showtable(Newbook)
  //用这个 objid 存储我要删除的那行的id
  let objid
  //每一项的删除功能,
  function dele(id) {
    $('#mySmallModalLabel').modal("show")
    objid = id
  }
  function submit_dele() {
    for (let i = 0; i < Newbook.length; i++) {
      if (Newbook[i].id == objid) {
        // $('#tbody').children().eq(i).remove
        Newbook.splice(i, 1)
      }
    }
    showtable(Newbook)
  }


  //每一项的修改功能

  function change(index) {
    $('#exampleModal').modal("show")

    let obj = Newbook[index]

    $('#book_name').val(obj.book_name)
    $('#index_number').val(obj.index_number)
    $('#site').val(obj.site)
    $('#publication_time').val(obj.publication_time)
    $('#book_class').val(obj.book_class)
    $('#site_library').val(obj.site_library)
    $('#class_num').val(obj.class_num)
    $('#author').val(obj.author)
  }
  //点击提交，得到修改后的值，然后放在table相应的位置
  function submit() {
    let index_number = $('#index_number').val()

    for (let i = 0; i < Newbook.length; i++) {
      if (index_number == Newbook[i].index_number) {
        Newbook[i].book_name = $('#book_name').val()
        Newbook[i].index_number = $('#index_number').val()
        Newbook[i].site = $('#site').val()
        Newbook[i].publication_time = $('#publication_time').val()
        Newbook[i].book_class = $('#book_class').val()
        Newbook[i].site_library = $('#site_library').val()
        Newbook[i].class_num = $('#class_num').val()
        Newbook[i].author = $('#author').val()
        break
      }

    }
    showtable(Newbook)

  }

</script>

</html>